<template>
  <div>
    <el-form :model="searchForm" inline>
      <el-form-item label="姓名">
        <el-input placeholder="标题" clearable v-model="searchForm.name"/>
      </el-form-item>
      <el-form-item label="评论时间">
        <el-date-picker v-model="timeRange" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"/>
      </el-form-item>
      <el-form-item label="评论状态">
        <el-select placeholder="选择评论状态" clearable v-model="searchForm.commentStatus">
          <el-option :value="1" label="待审核"/>
          <el-option :value="2" label="已通过"/>
          <el-option :value="3" label="已拒绝"/>
        </el-select>
      </el-form-item>
      <el-form-item label="信息状态">
        <el-select placeholder="选择信息状态" clearable v-model="searchForm.status">
          <el-option :value="1" label="可用"/>
          <el-option :value="2" label="禁用"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getDataList">查询</el-button>
      </el-form-item>
    </el-form>
    <CommentTable :data-list="dataList" :is-dialog="false" :page-info="pageInfo" @changeStatus="changeStatus" @currentChange="currentChange" @sizeChange="sizeChange" @examComment="examComment" @deleteInfo="deleteInfo"/>
    <CommentExam ref="commentExam" @onCloseDialog="getDataList"/>
  </div>
</template>

<script>
import CommentExam from '@/views/admin/comment/CommentExam'
import CommentTable from '@/components/CommentTable'
export default {
  name: 'CommentList',
  components: { CommentExam, CommentTable },
  data () {
    return {
      searchForm: {
        name: '',
        commentStatus: '',
        status: '',
        commentTimeRange: ''
      },
      timeRange: [],
      dataList: [],
      pageInfo: {
        page: 1,
        limit: 5,
        total: 0
      }
    }
  },
  methods: {
    getDataList () {
      if (this.timeRange) {
        this.searchForm.commentTimeRange = this.timeRange + ''
      } else {
        this.searchForm.commentTimeRange = ''
      }
      this.searchForm = {
        ...this.searchForm,
        ...this.pageInfo
      }
      this.$http.get('admin/comment/page', this.searchForm).then(data => {
        this.dataList = data.data.records
        this.pageInfo.page = data.data.current
        this.pageInfo.limit = data.data.size
        this.pageInfo.total = data.data.total
      })
    },
    examComment (commentId) {
      this.$refs.commentExam.init(commentId)
    },
    deleteInfo (commentId) {
      this.$confirm(`确定删除编号为[${commentId}]的数据吗？`).then(() => {
        this.$http.delete(`admin/comment/delete/${commentId}`).then(() => {
          this.$alert('删除成功！', { type: 'success' }).then(() => {
            this.getDataList()
          })
        })
      })
    },
    currentChange (value) {
      this.pageInfo.page = value
      this.getDataList()
    },
    sizeChange (value) {
      this.pageInfo.limit = value
      this.getDataList()
    },
    changeStatus ({ commentId, status }) {
      this.$confirm(`确定更改编号为[${commentId}]的数据状态吗？`).then(() => {
        this.$http.post('admin/comment/status', { commentId, status }).then(() => {
          this.$message({
            message: '状态更改完成',
            type: 'success',
            onClose: () => {
              this.getDataList()
            }
          })
        })
      })
    }
  },
  created () {
    this.$nextTick(() => {
      this.getDataList()
    })
  }
}
</script>

<style scoped>

</style>
